<!--
<template>
  <div id="app">
    <div class="mapContent">
      <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true" :events="mapEvents">
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="icon" :events="marker.events"></el-amap-marker>
        <el-amap-info-window :position="currentWindow.position"
                             :content="currentWindow.content"
                             :visible="currentWindow.visible"
                             :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>
      &lt;!&ndash; 设置marker点 &ndash;&gt;
      <searchForm :message="ownSearch" class="searchPosition" ref="searchForm" style="margin-top:4%"></searchForm>
      <div class="searchBtn" @click="getDevicePosition()" style="top:14%">搜索</div>
      &lt;!&ndash; 设置弹窗 &ndash;&gt;
      <el-dialog :visible.sync="showAddPlc">
        <div class="mapmsgName">详细信息</div>
        <div class="mapMsgDetail" style="padding-top: 24px;">
          <div class="mapDataShow">编号：<span>{{clickId}}</span></div>
          <div class="mapDataShow">名称：<span>{{clickName}}</span></div>
        </div>
        <div class="mapMsgDetail">
          <div class="mapDataShow">类型：<span>{{clickType}}</span></div>
        </div>
        <div class="mapMsgDetail">
          <div class="mapDataShow">经度：<span>{{clickLng}}</span></div>
          <div class="mapDataShow">纬度：<span>{{clickLat}}</span></div>
        </div>
        <div class="mapEcharts" id="energy" style="padding-top: 24px;"></div>
        <div class="mapEcharts" id="lineLoss"></div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import VueAMap from 'vue-amap'
import searchForm from '@/components/common/searchForm/searchForm'
import echarts from "echarts"
let amapManager = new VueAMap.AMapManager();
export default {
  components:{searchForm},
  data(){
    return{
      ownSearch:['ifTqUp','ifdeviceUp'],
      zoom:6,
      showAddPlc:false,
      center:[102.61,37.94],
      // icon:require('../../../../static/images/map/lhfj@2x.png'),
      amapManager,
      mapEvents: {
        init(o) {
          o.setMapStyle('amap://styles/darkblue');//自定义的高德地图的样式
        }
      },
      markers:[],
      currentWindow:{
        position:[102.61,37.94],
        id:'',
        content:'',
        events:{},
        visible:false
      },
      msgContent:'',
      clickId:'',
      clickName:'',
      clickType:'',
      clickLng:'',
      clickLat:''

    }
  },
  methods:{
    //获取设备位置
    getDevicePosition(){
      let _this = this
      let body = {};
      _this.markers=[];
      body.districtOfficeId=this.$refs.searchForm.upTqValue
      body.id=''
      body.deviceId=this.$refs.searchForm.upDeviceValue
      _this.$http.post(_this.$api.devicePositionApi.queryPosition, body).then(function (res) {
        if (res.code === '00000') {
          let positionArr=[];
          let needData=res.data;
          needData.forEach(element => {
            let positionData={};
            positionData.position=element.position.split(','),
                positionData.events={
                  click:(e) => {
                    _this.currentWindow.visible=false;
                    _this.clickId=element.id,
                        _this.clickName=element.name,
                        _this.clickType=_this.getDeviceName(element.type),
                        //获取点击经纬度
                        _this.clickLng=e.lnglat.lng,
                        _this.clickLat=e.lnglat.lat,
                        _this.showAddPlc=true;
                    _this.$nextTick(()=>{
                      _this.getDeviceDetail(element.id,_this.$refs.searchForm.upTqValue)
                    })
                  },
                  //鼠标移到marker点显示的弹窗信息
                  mouseover:(e)=>{
                    _this.currentWindow.visible=false;
                    _this.$nextTick(()=>{
                      _this.currentWindow={
                        position:[e.lnglat.lng,e.lnglat.lat],
                        content: '<div class="mapMsg">'
                            +'<div class="msgNameDetail">基本信息</div>'
                            +'<div class="msgDetail">编号：'+element.id+'</div>'
                            +'<div class="msgDetail">名称：'+element.name+'</div>'
                            +'<div class="msgDetail">类型：'+_this.getDeviceName(element.type)+'</div>'
                            +'<div class="msgDetail">经度：'+e.lnglat.lng+'</div>'
                            +'<div class="msgDetail">纬度：'+e.lnglat.lat+'</div>'
                            +'</div>',
                        visible:true,
                        events:{}
                      };
                      _this.currentWindow.visible=true;
                    })
                  }
                }
            _this.markers.push(positionData);

          })
        }
      }).catch(function () {
        console.log('请求失败')
      })
    },
    getDeviceName(deviceType){
      if(deviceType=='TABLE'||deviceType==3){
        return "电表"
      }else if(deviceType=="TABLE_BOX"||deviceType==2){
        return "表箱";
      }else if(deviceType=="DISTRICT_OFFICE"||deviceType==0){
        return "总表";
      }else if("BRANCH_BOX"==deviceType||deviceType==1){
        return "分支箱"
      }else if("GROUP"==deviceType){
        return "组"
      }
      return '未知';
    },
    //获取点击点的详细信息 并给详细信息弹窗绑定值
    getDeviceDetail(deviceId,monitorId){
      let _this = this
      let body = {};
      body.monitorId=monitorId
      body.deviceId=deviceId
      _this.$http.post(_this.$api.devicePositionApi.queryDeviceData, body).then(function (res) {
        if(res.code=='00000'){
          let myChart = _this.$echarts.init(document.getElementById('energy'));
          let myChartLoss = _this.$echarts.init(document.getElementById('lineLoss'));
          let optionEn = {
            color:['#228FFE'],
            title: {
              text: '当天能耗曲线',
              textStyle:{
                fontSize:13,
                color:'#2BEDE6',
              }
            },
            xAxis: {
              type: 'category',
              data: [ '0','4', '8', '12','16','20','24'],
              "axisLabel":{
                interval: 0
              },
              axisLine:{
                lineStyle:{
                  color:'#2BEDE6',
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine:{
                lineStyle:{
                  color:'#2BEDE6',
                }
              }
            },
            grid:{
              x:30,
              y:30,
              x2:30,
              y2:20,
              borderWidth:10
            },
            series: [{
              data: res.data.arrHn,
              type: 'line',
              smooth:true,
              itemStyle: {normal: {  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(34,143,254,0.7)'
                    }, {
                      offset: 1,
                      color: 'rgba(34,143,254,0)'
                    }])
                  },
                }},
            }]
          };
          let optionLine = {
            color:['#FF4D4D'],
            title: {
              text: '当天线损曲线',
              textStyle:{
                fontSize:13,
                color:'#2BEDE6',
              }
            },
            xAxis: {
              type: 'category',
              data: [ '0','4', '8', '12','16','20','24'],
              "axisLabel":{
                interval: 0
              },
              axisLine:{
                lineStyle:{
                  color:'#2BEDE6',
                }
              }

            },
            yAxis: {
              type: 'value',
              axisLine:{
                lineStyle:{
                  color:'#2BEDE6',
                }
              }
            },
            grid:{
              x:30,
              y:30,
              x2:30,
              y2:20,
              borderWidth:10
            },
            series: [{
              data: res.data.arrXs,
              type: 'line',
              smooth:true,
              itemStyle: {normal: {  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255,77,77,0.7)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,77,77,0)'
                    }])
                  },
                }},
            }]
          };
          myChart.setOption(optionEn);
          myChartLoss.setOption(optionLine)
        }

      })
    },

  },

}
</script>

-->
<template>

</template>
